<template>
  <li @click="toDetail(item.bookId)" class="list-template" :class="diff">
    <div class="cover">
      <img :src="item.coverUrl" v-default-img="defaultImg" />
      <div class="top-num" v-show="index">
        <span>TOP</span>
        <span class="num" v-text="index"></span>
      </div>
    </div>
    <div class="info">
      <h3
        class="ellipsis bookTitle"
        v-html="item.bookTitle || item.bookName"
      ></h3>
      <p class="authorName">
        <span class="ellipsis" v-html="item.authorName"></span>
        <button class="preview">Preview</button>
      </p>
      <p class="ellipsis-two bookIntro" v-html="item.bookIntro"></p>
      <div
        class="category"
        v-if="item.category && item.category.name && isCategory"
      >
        <span v-text="item.category.name"></span>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/default-cover.png"),
    };
  },
  props: {
    item: {
      type: Object,
    },
    diff: {
      type: String,
    },
    index: [Number, String],
  },
  components: {},
  computed: {
    isCategory() {
      return this.diff !== "home-rankings";
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 跳转详情页
    toDetail(id) {
      this.$router.push({
        name: "bookDetail",
        params: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-template {
  width: 100%;
  height: 160px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  &:first-of-type {
    .cover {
      .top-num {
        background: linear-gradient(90deg, #ef6a59 0%, #e25176 100%);
      }
    }
  }
  &:nth-of-type(2) {
    .cover {
      .top-num {
        background: linear-gradient(90deg, #f6be30 0%, #ffd615 100%);
      }
    }
  }
  &:nth-of-type(3) {
    .cover {
      .top-num {
        background: linear-gradient(90deg, #307bf4 0%, #0cbdf3 100%);
      }
    }
  }
  .cover {
    width: 120px;
    height: 100%;
    img {
      width: 120px;
      height: 100%;
      border-radius: 8px;
    }
    .top-num {
      width: auto;
      height: 28px;
      border-top-left-radius: 8px;
      line-height: 28px;
      padding: 0 5px;
      text-align: center;
      color: #fff;
      font-weight: bolder;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: #999999;
      .num {
        padding-left: 4px;
      }
    }
  }
  .info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 16px;
    overflow: hidden;
    .category {
      line-height: 22px;
      span {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        padding: 0 5px;
        border-radius: 3px;
        color: #e86472;
        background: rgba(232, 100, 114, 0.2);
        font-family: PingFangSC-Medium, PingFang SC;
      }
    }
    .authorName {
      font-size: 14px;
      line-height: 23px;
      color: #999999;
      font-family: Poppins-Regular, Poppins;
      .preview {
        cursor: pointer;
        display: none;
      }
    }
    .bookIntro {
      font-size: 14px;
      max-height: 40px;
      color: #666666;
      line-height: 20px;
      font-family: Poppins-Regular, Poppins;
    }
    .bookTitle {
      font-size: 18px;
      line-height: 26px;
      color: #000000;
      font-family: Poppins-SemiBold, Poppins;
    }
  }
  &.home-rankings {
    height: 160px;
    .cover {
      width: 120px;
      height: 100%;
      position: relative;
      img {
        width: 120px;
        height: 100%;
      }
    }
    .info {
      padding-top: 5px;
      padding-bottom: 5px;
      .category {
        height: 0;
        visibility: hidden;
      }
    }
  }
  &.home-favorite,
  &.library-list {
    .cover {
      width: 120px;
      height: 160px;
      img {
        width: 120px;
        height: 160px;
        position: absolute;
        bottom: 24px;
      }
    }
    .info {
      width: 210px;
    }
  }
  &.library-list,
  &.home-rankings,
  &.rankings-list,
  &.search-list {
    .bookIntro {
      max-height: 69px;
      line-height: 23px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      line-clamp: 3 !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical;
    }
  }
  &.rankings-list,
  &.search-list {
    height: 180px;
    margin-bottom: 32px;
    .cover {
      width: 140px;
      position: relative;
      img {
        width: 140px;
      }
      .top-num {
        border-top-left-radius: 8px;
      }
    }
    .info {
      padding-left: 17px;
      justify-content: space-around;
      .bookTitle {
        order: 1;
      }
      .bookIntro {
        order: 2;
      }
      .authorName {
        order: 3;
        display: flex;
        justify-content: space-between;
        .preview {
          width: 120px;
          height: 38px;
          color: #fff;
          background: #e86472;
          border-width: 0;
          border-radius: 6px;
          display: block;
        }
      }
      .category {
        display: none;
      }
    }
  }
}
</style>
